<template>
  <div>
    <h2>用户列表</h2>
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <button @click="fetchUsers">刷新</button>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const users = ref([]);
    const loading = ref(false);

    const fetchUsers = async () => {
      loading.value = true;
      try {
        const data = await request.get("/api/todo");
        users.value = data;
      } catch (error) {
        // e("加载失败：" + error.message);
        ElMessage.error("加载失败：" + error.message);
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchUsers();
    });

    return {
      users,
      loading,
      fetchUsers,
    };
  },
};
</script>
